import React, { Component } from "react";

class Child extends Component {
  state = {
    count: 0,
    // prevCount: 0,
  };

  // 根据props的值得到一个新的state
  // 可以接收两个参数
  // static getDerivedStateFromProps(nextProps, nextState) {
  //   console.log("getDerivedStateFromProps");
  //   // 必须要返回对象或者null，返回的对象会去合并state
  //   // return {
  //   //   count: nextProps.num,
  //   // };
  //   // return null;

  //   // 0s   nextProps.num 10  nextState.prevCount 0 --> count 10  prevCount 10
  //   // 3s   nextProps.num 20  nextState.prevCount 10 --> count 20  prevCount 20
  //   // 5s   nextProps.num 20  nextState.prevCount 20 --> count 40  prevCount 20

  //   if (nextProps.num === nextState.prevCount) {
  //     return null;
  //   } else {
  //     return {
  //       count: nextProps.num,
  //       prevCount: nextProps.num,
  //     };
  //   }
  // }

  render() {
    return (
      <>
        <div>child - {this.state.count}</div>
      </>
    );
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        count: 40,
      });
    }, 3000);
  }

  // 仅用于处理dom样式，用不到
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    return 555;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(snapshot);
  }
}

export default Child;
